import React, { useState, useEffect } from 'react';
import { getRightMessage, getAllList,alertPublish } from "../../../../api/ask"
import AskListItem from "../../../../components/Record/AskListItem"
import { Pagination, Modal, Input, Select, message } from "antd"
import Right from "../../../../components/Record/Right"
import "./askList.scss";
const { Option } = Select;
const provinceData = ['Zhejiang', 'Jiangsu'];
const AskList = () => {
    const [list, setList] = useState([])
    // 获取的数据
    const [topList] = useState([
        {
            type: 0,
            name: "实训"
        },
        {
            type: 1,
            name: "面试"
        },
        {
            type: 2,
            name: "工作"
        },
        {
            type: 3,
            name: "其他"
        },
        {
            type: 4,
            name: "答辩"
        }
    ])
    // 这里是上面tab切换的数据
    const [topCur, setTopCur] = useState(0)
    // 上面tab切换的高亮下标
    const [pageTotal, setPageTotal] = useState(0)
    // 这里是总的页数
    const [pageNum, setPageNum] = useState(1)
    // 当前的页码数
    const [pageSize, setPageSize] = useState(10)
    // 分页的每条的数量
    const [type, setType] = useState(null)
    // 这是tab切换的类型
    const [quality, setQuality] = useState(0)
    // 精品
    const [authentication, setAuthentication] = useState(0)
    // 教师认证答案
    const [questionTitle, setQuestionTitle] = useState(null)
    // 模糊搜索字段
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 提问弹窗的开关
    const [one] = useState([
        {
            name: "实训",
            type: 0
        },
        {
            name: "面试",
            type: 1
        },
        {
            name: "工作",
            type: 2
        },
        {
            name: "其他",
            type: 3
        },
    ])
    // 下拉框的数组
    const [some, setSome] = useState({
        questionContent:"",
        questionTitle:"",
        text1:"",
        text2:"",
        type:"1"
    })
    // 弹框发送的参数
    const [a,setA] = useState("")
    // 弹窗最后一个的值
    const init = async () => {
        let result = await getAllList({ pageNum, pageSize })
        setList(result.data.rows);
        setPageTotal(result.data.total)
    }
    // 初始化的获取右边头像的数据和总的列表
    useEffect(() => {
        init()
    }, [])
    // 组件完成加载的函数
    const getList = async () => {
        let result = await getAllList({ pageNum, pageSize, type, quality, authentication, questionTitle })
        setList(result.data.rows);
        setPageTotal(result.data.total)
    }
    const getAll = () => {
        setTopCur(0)
        setType(null)
    }
    // 点击tab全部触发的函数
    const getTypes = (index, types) => {
        setTopCur(index + 1)
        setType(types)
    }
    // 点击其他tab触发的函数
    const onChange = (pageNumber) => {
        setPageNum(pageNumber)
    }
    //   点击分页触发的函数
    useEffect(() => {
        getList()
    }, [pageNum, pageSize, type, quality, authentication, questionTitle])
    // 当这些参数改变的时候重新去调后端的列表请求接口
    const changeJin = (e) => {
        e.target.checked ? setQuality(x => x = 1) : setQuality(x => x = 0)
    }
    // 这是精品的切换
    const changeTeacher = (e) => {
        e.target.checked ? setAuthentication(x => x = 1) : setAuthentication(x => x = 0)
    }
    // 教师认证事件
    const changeInputValue = (e) => {
        if (e.target.value === "") {
            setQuestionTitle(null)
        } else {
            setQuestionTitle(e.target.value)
        }
    }
    // input模糊搜索事件
    const handleOk = async() => {
        let res = await alertPublish(some)
        message.success(res.data.msg)
        setSome({
            questionContent:"",
            questionTitle:"",
            text1:"",
            text2:"",
            type:0
        })
        setA("")
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 弹窗的确认和取消开关
    const checkEd = e => {
        setSome({
            ...some,
            type:Number(e)
        })
    }
    //   选择的函数
    const changeSome = (e) => {
        setSome({
            ...some,
            [e.target.name]:e.target.value
        })
    }
    // 弹框中input框的取值
    return (
        <div id="askList">
            <div className="askLeft">
                <div className="askLeft_top">
                    <span>类型：</span>
                    <span className={topCur === 0 ? "active" : ""} onClick={() => {
                        getAll()
                    }}>全部</span>
                    {
                        topList.map((item, index) => {
                            return <span key={index} className={topCur === index + 1 ? "active" : ""} onClick={() => {
                                getTypes(index, item.type)
                            }}>{item.name}</span>
                        })
                    }
                </div>
                <div className="askLeft_bottom">
                    <div className="askLeft_bottom_TOP">
                        <span><input type="checkbox" onChange={(e) => {
                            changeJin(e)
                        }} />仅看精品</span>
                        <span><input type="checkbox" onChange={(e) => {
                            changeTeacher(e)
                        }} />仅看教师认证答案</span>
                        <span><input type="text" className="askSearch" placeholder="搜索问题" onChange={(e) => {
                            changeInputValue(e)
                        }} /></span>
                    </div>
                    <div className="askLeft_bottom_Bottom">
                        {
                            list && list.map(item => {
                                return <AskListItem key={item.answerId} obj={item} />
                            })
                        }
                    </div>
                    <Pagination defaultCurrent={2} total={pageTotal} onChange={onChange} />
                </div>
            </div>
            <div className="askRight">
                <button onClick={() => {
                    setIsModalVisible(true);
                }}>我要提问</button>
                <Right />
                <Modal className="tanchuang" title="提问" okText="提问" cancelText="取消" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>标题</p>
                    <Input placeholder="请输入问题名称" name="questionTitle" value={some.questionTitle}  onChange={(e)=>{
                            changeSome(e)
                        }}/>
                    <p className="smalll">
                        <Select defaultValue={one[0].name} style={{ width: 120 }} onChange={(e) => checkEd(e)}>
                            {one.map(item => (
                                <Option key={item.type}>{item.name}</Option>
                            ))}
                        </Select>
                        <Input placeholder="公司" name="text1"  value={some.text1} onChange={(e)=>{
                            changeSome(e)
                        }}/>
                        <Input placeholder="岗位" name="text2" value={some.text2}  onChange={(e)=>{
                            changeSome(e)
                        }}/>
                    </p>
                    <p>描述</p>
                    <textarea name="questionContent" value={some.questionContent}  onChange={(e)=>{
                            changeSome(e)
                        }}/>
                    <p>标签</p>
                    <Input placeholder="最多输入五个标签，回车添加标签" value={a} onChange={(e)=>{
                        setA(e.target.value)
                    }}/>
                </Modal>
            </div>
        </div>
    );
};

export default AskList;